import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { toast } from '@/lib/toast-with-audio';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts';
import { cn } from '@/lib/utils';
import DetailDrawer, { Requirement as DetailRequirement } from '@/components/DetailDrawer';
import { requirementApi } from '@/store/requirement';
import type { Requirement, GetRequirementsParams } from '@/types/requirement';

// 使用导入的Requirement类型，不再需要本地定义

// 模拟需求数据，包含父子关系
const requirementData: Requirement[] = [
  {
    id: 1,
    code: 'REQ-RBAC-128',
    title: 'RBAC权限设计方案',
    project: '权限系统',
    submitter: '周产品经理',
    assignee: '李工程师',
    status: '开发中',
    priority: '高',
    progress: 75,
    createdAt: '2023-01-15',
    deadline: '2023-02-28',
    category: '功能需求',
    parentId: null,
    isExpanded: true,
    children: [
      {
        id: 8,
        code: 'REQ-RBAC-128-01',
        title: '用户角色设计',
        project: '权限系统',
        submitter: '周产品经理',
        assignee: '李工程师',
        status: '开发中',
        priority: '高',
        progress: 90,
        createdAt: '2023-01-20',
        deadline: '2023-02-15',
        category: '子需求',
        parentId: 1,
      },
      {
        id: 9,
        code: 'REQ-RBAC-128-02',
        title: '权限资源定义',
        project: '权限系统',
        submitter: '周产品经理',
        assignee: '王开发',
        status: '设计中',
        priority: '中',
        progress: 40,
        createdAt: '2023-01-25',
        deadline: '2023-02-20',
        category: '子需求',
        parentId: 1,
      }
    ]
  },
  {
    id: 2,
    code: 'REQ-UC-007',
    title: '用户中心改版',
    project: '用户中心',
    submitter: '张产品',
    assignee: '王设计师',
    status: '设计中',
    priority: '高',
    progress: 40,
    createdAt: '2023-02-10',
    deadline: '2023-03-31',
    category: 'UI/UX',
    parentId: null,
    isExpanded: true,
    children: [
      {
        id: 10,
        code: 'REQ-UC-007-01',
        title: '登录页面改版',
        project: '用户中心',
        submitter: '张产品',
        assignee: '王设计师',
        status: '已完成',
        priority: '高',
        progress: 100,
        createdAt: '2023-02-10',
        deadline: '2023-02-20',
        category: '子需求',
        parentId: 2,
      }
    ]
  },
  {
    id: 3,
    code: 'REQ-PAY-056',
    title: '支付流程优化',
    project: '支付中心',
    submitter: '赵产品',
    assignee: '钱工程师',
    status: '已完成',
    priority: '中',
    progress: 100,
    createdAt: '2023-01-20',
    deadline: '2023-02-15',
    category: '功能需求',
    parentId: null
  },
  {
    id: 4,
    code: 'REQ-ORDER-023',
    title: '订单系统性能优化',
    project: '订单中心',
    submitter: '孙架构',
    assignee: '李开发',
    status: '开发中',
    priority: '高',
    progress: 60,
    createdAt: '2023-02-05',
    deadline: '2023-03-20',
    category: '性能优化',
    parentId: null,
    isExpanded: true,
    children: [
      {
        id: 11,
        code: 'REQ-ORDER-023-01',
        title: '数据库查询优化',
        project: '订单中心',
        submitter: '孙架构',
        assignee: '李开发',
        status: '开发中',
        priority: '高',
        progress: 70,
        createdAt: '2023-02-08',
        deadline: '2023-03-10',
        category: '子需求',
        parentId: 4,
      },
      {
        id: 12,
        code: 'REQ-ORDER-023-02',
        title: '缓存策略调整',
        project: '订单中心',
        submitter: '孙架构',
        assignee: '郑工程师',
        status: '开发中',
        priority: '中',
        progress: 50,
        createdAt: '2023-02-10',
        deadline: '2023-03-15',
        category: '子需求',
        parentId: 4,
      }
    ]
  },
  {
    id: 5,
    code: 'REQ-MSG-019',
    title: '消息推送策略调整',
    project: '消息平台',
    submitter: '周产品经理',
    assignee: '吴工程师',
    status: '待评审',
    priority: '中',
    progress: 0,
    createdAt: '2023-02-25',
    deadline: '2023-04-10',
    category: '功能需求',
    parentId: null
  },
  {
    id: 6,
    code: 'REQ-PROD-087',
    title: '商品详情页信息展示优化',
    project: '商品管理',
    submitter: '郑产品',
    assignee: '王前端',
    status: '测试中',
    priority: '中',
    progress: 90,
    createdAt: '2023-01-30',
    deadline: '2023-03-05',
    category: 'UI/UX',
    parentId: null
  },
  {
    id: 7,
    code: 'REQ-SEC-034',
    title: '数据安全加固',
    project: '基础设施',
    submitter: '冯安全',
    assignee: '陈工程师',
    status: '开发中',
    priority: '高',
    progress: 50,
    createdAt: '2023-02-15',
    deadline: '2023-04-30',
    category: '安全需求',
    parentId: null
  },
];

// 需求状态分布数据（图表数据，保留）
const statusDistributionData = [
  { name: '待评审', value: 3, color: '#f59e0b' },
  { name: '设计中', value: 2, color: '#6366f1' },
  { name: '开发中', value: 5, color: '#3b82f6' },
  { name: '测试中', value: 2, color: '#8b5cf6' },
  { name: '已完成', value: 4, color: '#10b981' },
];

// 需求优先级分布数据（图表数据，保留）
const priorityDistributionData = [
  { name: '高', value: 6, color: '#ef4444' },
  { name: '中', value: 7, color: '#f59e0b' },
  { name: '低', value: 3, color: '#6b7280' },
];

// 状态徽章组件
const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
  const statusMap: Record<string, { bg: string, text: string }> = {
    '待评审': { bg: 'bg-amber-100', text: 'text-amber-700' },
    '设计中': { bg: 'bg-indigo-100', text: 'text-indigo-700' },
    '开发中': { bg: 'bg-blue-100', text: 'text-blue-700' },
    '测试中': { bg: 'bg-purple-100', text: 'text-purple-700' },
    '已完成': { bg: 'bg-green-100', text: 'text-green-700' },
    '已拒绝': { bg: 'bg-red-100', text: 'text-red-700' }
  };
  
  const style = statusMap[status] || { bg: 'bg-gray-100', text: 'text-gray-700' };
  
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${style.bg} ${style.text}`}>
      {status}
    </span>
  );
}

// 优先级标签组件
const PriorityTag: React.FC<{ priority: string }> = ({ priority }) => {
  const priorityMap: Record<string, { bg: string, text: string }> = {
    '高': { bg: 'bg-red-100', text: 'text-red-700' },
    '中': { bg: 'bg-amber-100', text: 'text-amber-700' },
    '低': { bg: 'bg-gray-100', text: 'text-gray-700' }
  };
  
  const style = priorityMap[priority] || { bg: 'bg-gray-100', text: 'text-gray-700' };
  
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${style.bg} ${style.text}`}>
      {priority}
    </span>
  );
}

// 类别标签组件
const CategoryTag: React.FC<{ category: string }> = ({ category }) => {
  return (
    <span className="px-2 py-1 text-xs bg-gray-100 rounded-full text-gray-700">
      {category}
    </span>
  );
};

// 进度条组件
  const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
    let color = '#3b82f6'; // 默认蓝色
    
    if (progress === 0) {
      color = '#d1d5db'; // 灰色表示未开始
    } else if (progress === 100) {
      color = '#10b981'; // 绿色表示已完成
    } else if (progress > 75) {
      color = '#22c55e'; // 浅绿色表示即将完成
    }
    
    return (
      <div className="w-full bg-gray-200 rounded-full h-2">
        <motion.div 
          className="h-2 rounded-full" 
          style={{ backgroundColor: color }}
          initial={{ width: 0 }}
          animate={{ width: `${progress}%` }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        ></motion.div>
      </div>
    );
  };

// 用户头像组件
const UserAvatar: React.FC<{ name: string }> = ({ name }) => {
  // 从姓名中提取第一个字符
  const initial = name.charAt(0).toUpperCase();
  
  // 为不同的姓氏生成不同的背景色
  const colors = [
    'bg-blue-100 text-blue-600',
    'bg-green-100 text-green-600',
    'bg-purple-100 text-purple-600',
    'bg-amber-100 text-amber-600',
    'bg-pink-100 text-pink-600',
    'bg-indigo-100 text-indigo-600'
  ];
  
  // 简单的哈希函数来选择颜色
  const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const colorClass = colors[hash % colors.length];
  
  return (
    <div className={`w-7 h-7 rounded-full ${colorClass} flex items-center justify-center text-xs font-medium`}>
      {initial}
    </div>
  );
};

export default function Requirements() {
  const [requirements, setRequirements] = useState<Requirement[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [priorityFilter, setPriorityFilter] = useState('all');
  const [projectFilter, setProjectFilter] = useState('all');
  
  // 抽屉组件状态
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [selectedRequirement, setSelectedRequirement] = useState<DetailRequirement | null>(null);

  // 加载需求数据
  useEffect(() => {
    const loadRequirements = async () => {
      try {
        setLoading(true);
        const response = await requirementApi.getRequirements();
        if (response.success) {
          setRequirements(response.data);
        } else {
          toast.error(response.message || '获取需求列表失败');
        }
      } catch (error) {
        console.error('加载需求数据失败:', error);
        toast.error('加载需求数据失败');
      } finally {
        setLoading(false);
      }
    };

    loadRequirements();
  }, []);

  // 计算过滤后的需求
  const filteredRequirements = requirements.filter(req => {
    const matchesSearch = req.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
                         req.code.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = statusFilter === 'all' || req.status === statusFilter;
    const matchesPriority = priorityFilter === 'all' || req.priority === priorityFilter;
    const matchesProject = projectFilter === 'all' || req.project === projectFilter;
    return matchesSearch && matchesStatus && matchesPriority && matchesProject;
  });

  // 处理查看需求详情
  const handleViewRequirement = (requirement: Requirement) => {
    setSelectedRequirement({
      ...requirement,
      type: 'requirement'
    });
    setIsDrawerOpen(true);
  };

  // 处理抽屉关闭
  const handleDrawerClose = () => {
    setIsDrawerOpen(false);
    setSelectedRequirement(null);
  };
  
  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      // 搜索逻辑
    }
  };
 // 处理创建需求
  const handleCreateRequirement = () => {
    toast('创建新需求');
  };

  // 计算统计数据
  const totalRequirements = requirements.length;
  const inProgressRequirements = requirements.filter(r => 
    r.status === '开发中' || r.status === '设计中' || r.status === '测试中'
  ).length;
  const completedRequirements = requirements.filter(r => r.status === '已完成').length;
  const highPriorityRequirements = requirements.filter(r => r.priority === '高').length;
  
  return (
    <div>
      <div className="mb-6">
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
        <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-100">需求管理</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">管理所有产品需求的创建、跟踪和完成</p>
        </motion.div>
      </div>
      
      {/* 需求概览卡片 */}
      <div className="grid grid-cols-4 gap-6 mb-6">
        <motion.div 
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          whileHover={{ scale: 1.02, y: -2 }}
        >
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">总需求数</h3>
            <i className="fa-solid fa-list-check text-blue-500"></i>
          </div>
          <div className="flex items-end justify-between">
            <motion.p 
              className="text-3xl font-bold text-gray-900 dark:text-gray-100"
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.5, delay: 0.3 }}
            >
              {totalRequirements}
            </motion.p>
            <p className="text-sm text-green-600 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>15%
            </p>
          </div>
        </motion.div>
        
        <motion.div 
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          whileHover={{ scale: 1.02, y: -2 }}
        >
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">进行中需求</h3>
            <i className="fa-solid fa-spinner text-blue-500"></i>
          </div>
          <div className="flex items-end justify-between">
            <motion.p 
              className="text-3xl font-bold text-gray-900 dark:text-gray-100"
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              {inProgressRequirements}
            </motion.p>
            <p className="text-sm text-green-600 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>8%
            </p>
          </div>
        </motion.div>
        
        <motion.div 
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
          whileHover={{ scale: 1.02, y: -2 }}
        >
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">已完成需求</h3>
            <i className="fa-solid fa-check-circle text-green-500"></i>
          </div>
          <div className="flex items-end justify-between">
            <motion.p 
              className="text-3xl font-bold text-gray-900 dark:text-gray-100"
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.5, delay: 0.5 }}
            >
              {completedRequirements}
            </motion.p>
            <p className="text-sm text-green-600 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>25%
            </p>
          </div>
        </motion.div>
        
        <motion.div 
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          whileHover={{ scale: 1.02, y: -2 }}
        >
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">高优先级需求</h3>
            <i className="fa-solid fa-triangle-exclamation text-red-500"></i>
          </div>
          <div className="flex items-end justify-between">
            <motion.p 
              className="text-3xl font-bold text-gray-900 dark:text-gray-100"
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.5, delay: 0.6 }}
            >
              {highPriorityRequirements}
            </motion.p>
            <p className="text-sm text-red-600 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>10%
            </p>
          </div>
        </motion.div>
      </div>
      
      {/* 图表区域 */}
      <div className="grid grid-cols-2 gap-6 mb-6">
        {/* 需求状态分布 */}
        <motion.div 
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          whileHover={{ scale: 1.01 }}
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">需求状态分布</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={statusDistributionData}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  fill="#8884d8"
                  paddingAngle={2}
                  dataKey="value"
                  label={({ name, value }) => `${name} ${value}`}
                  labelLine={false}
                >
                  {statusDistributionData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip formatter={(value, name) => [`${value}个需求`, name]} />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </motion.div>
        
        {/* 需求优先级分布 */}
        <motion.div 
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          whileHover={{ scale: 1.01 }}
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">需求优先级分布</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={priorityDistributionData}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  fill="#8884d8"
                  paddingAngle={2}
                  dataKey="value"
                  label={({ name, value }) => `${name} ${value}`}
                  labelLine={false}
                >
                  {priorityDistributionData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip formatter={(value, name) => [`${value}个需求`, name]} />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </motion.div>
      </div>
      
      {/* 工具栏 */}
      <motion.div 
        className="flex flex-wrap justify-between items-center gap-4 mb-6"
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.4 }}
      >
        <div className="flex items-center space-x-4 flex-wrap gap-2">
          <motion.div 
            className="relative"
            whileHover={{ scale: 1.02 }}
            transition={{ duration: 0.2 }}
          >
            <input 
              type="text" 
              placeholder="搜索需求..." 
              className="py-2 pl-10 pr-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              onKeyDown={handleSearch}
            />
            <i className="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500"></i>
          </motion.div>
          
          <motion.select 
            className="py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            whileHover={{ scale: 1.02 }}
            transition={{ duration: 0.2 }}
          >
            <option value="all">全部状态</option>
            <option value="待评审">待评审</option>
            <option value="设计中">设计中</option>
            <option value="开发中">开发中</option>
            <option value="测试中">测试中</option>
            <option value="已完成">已完成</option>
            <option value="已拒绝">已拒绝</option>
          </motion.select>
          
          <motion.select 
            className="py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            value={priorityFilter}
            onChange={(e) => setPriorityFilter(e.target.value)}
            whileHover={{ scale: 1.02 }}
            transition={{ duration: 0.2 }}
          >
            <option value="all">全部优先级</option>
            <option value="高">高</option>
            <option value="中">中</option>
            <option value="低">低</option>
          </motion.select>
        </div>
        
        <motion.button 
          className="flex items-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-300"
          onClick={handleCreateRequirement}
          whileHover={{ scale: 1.05, y: -1 }}
          whileTap={{ scale: 0.95 }}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.3, delay: 0.5 }}
        >
          <i className="fa-solid fa-plus mr-2"></i>
          新建需求
        </motion.button>
      </motion.div>
      
      {/* 需求列表 */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead className="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">需求编号</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">需求名称</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">所属项目</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">状态</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">优先级</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">需求提交人</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">负责人</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">进度</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">截止日期</th>
                <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              {filteredRequirements.map((requirement) => (
                <tr key={requirement.id} className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="font-mono text-sm text-gray-600 dark:text-gray-300 font-medium">{requirement.code}</div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="font-medium text-gray-900 dark:text-gray-100">{requirement.title}</div>
                    <div className="flex items-center mt-1">
                      <CategoryTag category={requirement.category} />
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-600 rounded-full text-gray-800 dark:text-gray-200">{requirement.project}</span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <StatusBadge status={requirement.status} />
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <PriorityTag priority={requirement.priority} />
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center">
                      <UserAvatar name={requirement.submitter} />
                      <span className="ml-2 text-sm text-gray-800 dark:text-gray-200">{requirement.submitter}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center">
                      <UserAvatar name={requirement.assignee} />
                      <span className="ml-2 text-sm text-gray-800 dark:text-gray-200">{requirement.assignee}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center">
                      <ProgressBar progress={requirement.progress} />
                      <span className="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">{requirement.progress}%</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    {requirement.deadline}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <button className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mr-4" onClick={() => handleViewRequirement(requirement)}>
                      <i className="fa-solid fa-eye mr-1"></i>详情
                    </button>
                    <button className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mr-4">
                      <i className="fa-solid fa-pen-to-square mr-1"></i>编辑
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* 分页 */}
        <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
          <div className="text-sm text-gray-500 dark:text-gray-400">显示 1 至 {filteredRequirements.length} 条，共 {requirements.length} 条</div>
          <div className="flex space-x-2">
            <button className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
              <i className="fa-solid fa-chevron-left text-xs"></i>
            </button>
            <button className="px-3 py-1 border border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-md">1</button>
            <button className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
              <i className="fa-solid fa-chevron-right text-xs"></i>
            </button>
          </div>
        </div>
    </div>
    
    {/* 详情抽屉 */}
    <DetailDrawer 
      isOpen={isDrawerOpen}
      onClose={handleDrawerClose}
      item={selectedRequirement}
    />
  </div>
);
}